<template>
  <div class="news-item-box" @click="onDetail(data.uuid)">
    <div class="left-content">
      <div class="img" :style="{backgroundImage: 'url(' + data.coverUrl + ')'}"></div>
      <div class="type" v-if="data.categoryName">{{data.categoryName}}</div>
    </div>
    <div class="right-content">
      <div class="title">{{data.name}}</div>
      <div class="content">{{data.summary}}</div>
      <div class="footer-box">
        <span class="tag" v-for="(item, index) of data.tags" :key="index" @click.stop="toSearch(item)">{{item.name}}</span>
        <div class="date">{{filterData(data.publishDate)}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
moment.locale('zh-cn');

export default {
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    onDetail(uuid) {
      let routerJump = this.$router.resolve({ name: 'InformationDetail', query: {uuid} });
      window.open(routerJump.href, '_blank');
    },
    filterData(date) {
      let result
      const nowMM = new Date().getTime()
      if (nowMM - date < 604800000) {
        result = moment(date).startOf('hour').fromNow()
      } else {
        result = moment(date).format('ll')
      }
      return result
    },
    toSearch(item) {
      const params = {
        keywords: item.name,
        type: 'tag',
        tagId: item.uuid
      };
      let routerJump = this.$router.resolve({ name: 'Search', query: params });
      window.open(routerJump.href, '_blank');
    }
  }
}
</script>

<style lang="scss" scoped>
.news-item-box {
  overflow: hidden;
  margin-bottom: 24px;
  cursor: pointer;
  .left-content {
    width: 240px;
    height: 134px;
    border-radius: 4px;
    float: left;
    position: relative;
    overflow: hidden;
    .img {
      width: 240px;
      height: 134px;
      border-radius: 4px;
      background-size: cover;
      transform: scale(1);
      transition: all 1s;
    }
    &:hover {
      .img {
        transform: scale(1.12);
        transition: all 1s;
      }
    }
    .type {
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      line-height: 24px;
      background: #4C4C4C;
      border-radius: 4px 0px 4px 0px;
      padding: 0 12px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
    }
  }
  .right-content {
    width: 504px;
    height: 134px;
    float: left;
    margin-left: 16px;
    position: relative;
    .title {
      max-height: 52px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #272727;
      line-height: 26px;
      margin-bottom: 8px;
      overflow: hidden;
      display: -webkit-box;//将元素设为盒子伸缩模型显示
      -webkit-box-orient: vertical;//伸缩方向设为垂直方向
      -webkit-line-clamp: 2;//超出3行隐藏，并显示省略号
      word-break: break-all;
      &:hover {
        color: #D42A31;
      }
    }
    .content {
      height: 45px;
      font-size: 14px;
      
      font-weight: 400;
      color: #696969;
      line-height: 22px;
      margin-bottom: 8px;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box; 
      -webkit-box-orient:vertical;
      -webkit-line-clamp:2;
      &:hover {
        color: #D42A31;
      }
    }
    .footer-box {
      position: absolute;
      width: 100%;
      bottom: 0;
      left: 0;
      .tag {
        display: inline-block;
        height: 18px;
        font-size: 12px;
        
        font-weight: 400;
        color: #A8A8A8;
        line-height: 18px;
        margin-right: 8px;
        &:hover {
          color: #D42A31;
        }
      }
      .date {
        float: right;
        height: 18px;
        font-size: 12px;
        
        font-weight: 400;
        color: #A8A8A8;
        line-height: 18px;
      }
    }
  }
}
</style>